<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="main-container">
        <CellDesc title="资源信息" :list="list" />
        <CellTitle title="数据关联视图" /> 
        <div style="height: 495px;width: 1526px;border-radius: 8px;">
            <BloodTiesChart width="100%" height="100%" :data="bloodTiesData" />
        </div>
      </div>
    </template>
  </PageMain>
</template>

<script setup lang=ts>
import PageMain from '@/components/PageBox.vue';
import { onMounted, ref } from 'vue';
// ../BloodTiesChart/index.vue
import BloodTiesChart from '@/views/resourceLedger/BloodTiesChart/index.vue';
import CellDesc from '@/views/resourceLedger/components/CellDesc.vue';
import CellTitle from '@/views/resourceLedger/components/CellTitle.vue';
const testarr = [
  {id: "3", name: "环境监测资源(V1)", version: 1, type: "根资源", parent_id: ["4"], currently: false},
  {id: "4", name: "数据采集资源(V1)", version: 1, type: "根资源", parent_id: [], currently: true}
]
const bloodTiesData = ref<any>([]);
onMounted(() => {
  if (testarr?.filter((v: any) => !v.currently).length > 0) {
      bloodTiesData.value = testarr;
    }
})

const list = ref([
  {
    name: '资产名称：',
    value: '数据采集包测试'
  },
  {
    name: '资产编号：',
    value: 'SOO10'
  },
  
])
</script>
<style lang="less" scoped>
.main-container{
  padding: 0 24px;
}
</style>